<template>
  <div>
    <div class="flex space-between padding" v-show="policyAttachment">
      <span></span>
      <el-button @click="handleDowload">
        <el-icon size="24">
          <img src="@/assets/icons/dowload.png" class="icon" />
        </el-icon>
        <span>附件下载</span>
      </el-button>
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleTabClick">
      <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.value"></el-tab-pane>
    </el-tabs>
   <el-scrollbar max-height="50vh">
    <p v-html="content"></p>
   </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import apiMod from '@/apiMod'
import FileSaver from 'file-saver'

type Props = {
  list: any
}
const props = withDefaults(defineProps<Props>(), {})
console.log(props.list,'list---')
const tabList = computed({
  get() {
    let data = []
    if(props.list) {
      data= Array.isArray(props.list)? props.list : JSON.parse(props.list)
    }
    activeName.value = data[0]?.value
    return data
  },
  set(){}
})
const activeName = ref('')
const content = ref('')
const policyTitle = ref('')
const policyAttachment = ref('')
const getInitData = () => {
  if (!activeName.value) {
    return
  }
  apiMod.dpPolicyDocument_view(activeName.value).then((res) => {
    if(!res.data) return
    content.value = res.data.policyContent
    policyAttachment.value = res.data.policyAttachment
    policyTitle.value = res.data.policyTitle
  })
}

const handleDowload = ()=> {
  FileSaver.saveAs(policyAttachment.value,policyTitle.value+ '附件')
}

const handleTabClick = () => {
  getInitData()
}
onMounted(() => {
  getInitData()
})

</script>

<style scoped></style>